import React, { useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { getSeatTotalAPI } from '@/service/seat';

const BarChart = () => {
  const [option, setOption] = useState({
    title: {
      text: '月度数据',
    },
    tooltip: {},
    xAxis: {
      data: [],
    },
    yAxis: {},
    series: [
      {
        name: '使用率',
        type: 'bar', // 修改这里
        data: [],
      },
    ],
  });
  const restaurantId = localStorage.restaurant;

  useEffect(() => {
    getSeatTotalAPI(restaurantId).then((data) => {
      //柱形图
      const xAxisData = data.map((item) => item.seatName);
      const seriesData = data.map((item) => item.count);
      setOption({
        title: {
          text: '月度数据',
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
        },
        yAxis: {},
        series: [
          {
            name: '使用率',
            type: 'bar', // 修改这里
            data: seriesData,
          },
        ],
      });
    });
  }, []);
  return <ReactEcharts option={option} />;
};

export default BarChart;
